<template>
  <div id="home">
    <Banners />
    <FilterBar  @queryData="queryData"/>
    <div class="item-box" v-if="sellingArtworks.count != 0">
      <ArtItem
        :artData="item"
        class="art-item"
        v-for="item in sellingArtworks.data"
        :key="item.id"
        :type="'selling'"
      />
    </div>
    <div class="pagination" v-if="sellingArtworks.count != 0">
      <el-pagination
        :page-size="20"
        :pager-count="5"
        layout="prev, pager, next"
        :current-page="parseInt(filterOptions.pageIndex)"
        :total="sellingArtworks.count"
        background
        @prev-click="prevPage"
        @next-click="nextPage"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
    <div class="no-result" v-if="sellingArtworks.count == 0">
      <span>什么都没找到</span>
    </div>
  </div>
</template>

<script>
// import PublicArt from "./PublicArt";
import ArtItem from "@/components/ArtItem";
import Banners from "./Banners";
import FilterBar from "@/components/FilterBar";
import { mapState } from "vuex";
import contract_abi from "@/contract/artwork_trade_contract.json";

export default {
  name: "Home",
  components: {
    // PublicArt,
    ArtItem,
    Banners,
    FilterBar,
  },
  provide: {},
  computed: {
    ...mapState({
      allArtworks: (store) => store.home.allArtworks,
      sellingArtworks: (store) => store.home.sellingArtworks,
      filterOptions: (store) => store.home.filterOptions,
    }),
  },
  data() {
    return {
      // 是否展示购买确认弹窗
      showFlag: false,
    };
  },


  mounted() {
    // this.$store.dispatch("allArtworks");
    this.$store.dispatch("userInfo").then(() => {
      let queryData = {
        pageSize: "20",
        pageIndex: "1",
        classify: "所有",
        form_of_sale: "所有",
        minprice: "0",
        maxprice: "100000000000000000000000000000",
      };
      if (this.$store.getters.user_address != null) {
        queryData.user_address = this.$store.getters.user_address;
      }
      this.$store.dispatch("sellingArtworks", queryData);
    });

    // // 链接获取合约实例
    // this.ContractAbi = new this.$web3.eth.Contract(
    //   contract_abi,
    //   "0xD24692f4c041d034d7c79b0E342264018606FF27"
    // );

    // console.log(
    //   this.$web3.eth.getAccounts().then((result) => {
    //     console.log(result);
    //   })
    // );
  },
  methods: {
    // 购买艺术品
    async buyArt(aid, price) {
      console.log(aid, price);
      let accounts = await this.$web3.eth.getAccounts();
      this.ContractAbi.methods
        .buyArt(aid)
        .send({ from: accounts[0], value: price })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => console.log(err));
    },

    // 上一页
    prevPage() {
      this.pageIndex = parseInt(this.filterOptions.pageIndex) - 1;
      this.$store.dispatch("sellingArtworks", {
        ...this.filterOptions,
        pageIndex: this.pageIndex,
      });
    },
    // 下一页
    nextPage() {
      this.pageIndex = (parseInt(this.filterOptions.pageIndex) + 1).toString();
      this.$store.dispatch("sellingArtworks", {
        ...this.filterOptions,
        pageIndex: this.pageIndex,
      });
    },

    // 页数改变
    pageChange(page) {
      this.$store.dispatch("sellingArtworks", {
        ...this.filterOptions,
        pageIndex: page.toString(),
      });
    },

    // 发起请求
    queryData(data) {
      this.$store.dispatch("sellingArtworks", data);
    },
  },
};
</script>

<style lang='less'>
#home {
  margin: 0 auto;
  width: 100%;
  padding-bottom: 30px;
  // padding: 0 30px;
  .pagination {
    display: flex;
    justify-content: center;
  }
  .no-result {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
  }
}
</style>